/*
		 * 需求分析
		 * 1·动态生成dom元素
		 * 		（1）生产数量
		 * 		（2）创建dom元素
		 * 				createElement
		 * 				修改元素属性
		 * 				放到body标签
		 * 		（3）创建多个
		 * 						循环 封装
		 * 						fragment  文档片段  dom性能
		 * 			(4)初始化位置
		 * 				1 top
		 * 					top = window高度
		 * 				2 left
		 * 					伪随机数0-wW浏览器宽度
		 * 					random（） 0-1 包括0 不包括1
		 * 				3 边界限制
		 * 					
		 * 2·气球向上移动
		 * 		(1)向上移动  top减少   top = 当下top -步长
		 * 		(2)定时器  setinterval setTimeout requestAnimationFrame
		 * 					setinterval（做的事情，间隔ms）
		 * 					setTimeout（要做的事情，延迟间隔）
		 * 		(3)speed 自定义标签
		 * 3·点击消失
		 		1鼠标i点击事件  onclick
		 		2parentNode.removeChlid(chlidren)
		 *4·气球动画 
		 * 
		 * */
		var num = 2,/*气球初始化数量*/
		bz = 160,
		 wW = window.innerWidth,
		 wH = window.innerHeight,
		 timer,
		 balloons =[];
		/* 创建节点*/
		init (1);
		//clearInterval(timer);
		timer = setInterval(move,300/30);
		document.body.addEventListener('click',function(e){
			//event事件对象
			if(e.target.className=== 'balloon'){
				//e.target.parentNode.removeChild(e.target);
				boom.call(e.target,function(){
					this.parentNode.removeChild(this);
					init(1);
					//this.Style.col
				}.bind(e.target));
			}
		}
		,false);
		//气球爆炸动画 this 对象 指针 偏移 
		function boom(cb){
			
			this.timer = setInterval(function(){
				if(this.offsetWidth <10){
					clearInterval(this.timer);
					
					cb&&cb();
					//this.parentNode.removeChild(this);
				}
				//console.log(this);
				this.speed++;
				this.style.width = this.offsetWidth - 10 + 'px';
				this.style.height = this.offsetHeight - 10 + 'px';
			}.bind(this),1000/60);
			
		}
		
		move(); 
		
		
		function init(){
			var fragment = document.createDocumentFragment();//文档片段			
			for (var i=0; i<num;i++){// for       if没有块级作用域
				var ranX = ~~(Math.random()*wW)-bz;
				ranX = Math.max(0,ranX);//ranX  -10 0
			var oBalloon = document.createElement('div')
		
		oBalloon.className = 'balloon'; //添加类名
		oBalloon.style.top = wH + 'px';
		oBalloon.style.left =ranX + 'px';
		
		balloons.push(oBalloon);
		oBalloon.speed = ~~Math.random()*9 + 1;
		console.log(ranX);
		fragment.appendChild(oBalloon);  //添加到body
		}
			document.body.appendChild(fragment);
		}
		function move(){
			
			//var aballoons = document.querySelectorAll('.balloon');
			for(var i=0,len=balloons.length;i<len;i++){
				balloons[i].style.top = balloons[i].offsetTop - balloons[i].speed  + 'px';
				
				
			}
			
		}
		
		